線とドットのマーカー

面グラフや折れ線グラフでは、X 軸または Y 軸全体とデータポイントをマークするマーカーがほしい場合があります。次の図に、そのような線とドットのマーカーの例を示します。

このようなマーカーを作成するために設定するプロパティとして最も重要なものの１つは、VerticalAlignment プロパティです。このプロパティを "Stretch" に設定すると、マーカーがプロットの高さ全体に引き伸ばされて垂直線になります。マークアップで、次のプロパティを設定します。

Attach = DataX
Action = MouseMove
DataPoint = -1, NaN
HorizontalAlignment = Center
VerticalContentAlignment = Stretch

データポイントの Y の値を NaN に設定していることに注目してください。このように設定すると、マーカーは特定のデータポイントにアタッチしないため、垂直方向いっぱいに伸びた直線が引かれます。上の図の丸いラベルは、プロット要素上に配置される別の ChartPanelObject です。この DataPoint プロパティは NaN 以外の値に設定します。

この効果は、XAML マークアップを使用するだけで作成でき、コードは必要ありません。

XAML	コードのコピー
<!-- 垂直線とドットのマーカー --> <c1:ChartPanelObject x:Name="vline" Attach="DataX" Action="MouseMove" DataPoint="-1, NaN" VerticalContentAlignment="Stretch" HorizontalAlignment="Center"> <Border Background="Black" BorderBrush="Black" Padding="1" BorderThickness="1 0 0 0" /> </c1:ChartPanelObject> <c1:ChartPanelObject x:Name="dot" Attach="DataX" Action="MouseMove" DataPoint="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid DataContext="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Parent}"> <Ellipse Fill="White" Stroke="Black" StrokeThickness="1" Width="30" Height="30" /> <TextBlock x:Name="label" Text="{Binding DataPoint.Y, StringFormat=n0}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </c1:ChartPanelObject>

XAML

コードのコピー

<!-- 垂直線とドットのマーカー -->
<c1:ChartPanelObject x:Name="vline"
                     Attach="DataX"
                     Action="MouseMove"
                     DataPoint="-1, NaN"
                     VerticalContentAlignment="Stretch"
                     HorizontalAlignment="Center">
        <Border Background="Black" BorderBrush="Black" Padding="1" BorderThickness="1 0 0 0" />
</c1:ChartPanelObject>
<c1:ChartPanelObject x:Name="dot"
                     Attach="DataX"
                     Action="MouseMove"
                     DataPoint="0.5,0.5"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center">
    <Grid DataContext="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Parent}">
        <Ellipse Fill="White" Stroke="Black" StrokeThickness="1" Width="30" Height="30" />
        <TextBlock x:Name="label" Text="{Binding DataPoint.Y, StringFormat=n0}" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</c1:ChartPanelObject>

上のマークアップだけで、線とドットのチャートマーカーを作成できます。